<template>
    <div class="page">
       <c-title :text="group_code.code_name || '群活码'" ></c-title>
       <div class="notice">
         <van-notice-bar
           left-icon="volume-o"
           :text="group_code.code_guide"
         />
       </div>

      <div class="group-code">
        <div class="group-header">
          <div class="image">
            <img class="img" v-if="groupCodeInfo.member_id" :src="groupCodeInfo.has_one_member.avatar_image" alt="图片无效" />
            <img class="img" v-else :src="shop_log" alt="图片无效" />
          </div>
          <div class="group-title">
            <div class="title">{{groupCodeInfo.group_code && groupCodeInfo.group_code.code_name}}</div>
            <div class="desc">{{groupCodeInfo.group_code && groupCodeInfo.group_code.code_guide}}</div>
          </div>
        </div>
        <div class="group-content flex-a-c flex-j-c">
          <div class="img">
            <img :src="groupCodeInfo.code_url_img" alt="">
          </div>
          <div class="explain">
            <p>长按识别二维码</p>
            <span v-if="groupCodeInfo.code_type == 1 && groupCodeInfo.is_can_join == 0">所有群已经满员，请联系客服！</span>
            <span v-if="groupCodeInfo.code_type == 0">该二维码{{groupCodeInfo.expire}}前有效</span>
            <span>注：若二维码无法进入，请联系客服</span>
          </div>
        </div>
      </div>
      <div class="opts-box flex-a-c ">
        <div class="opts-item flex-a-c">
          <div class="opt flex-a-c flex-j-c share" @click="shareFlag = true">
            <span class="iconfont icon-share"></span>
          </div>
          <h3>分享</h3>
        </div>
        <div class="opts-item flex-a-c">
          <div class="opt flex-a-c flex-j-c service" @click="kfFlag = true">
            <span class="iconfont icon-wodekefu"></span>
          </div>
          <h3>客服</h3>
        </div>
        <div class="opts-item flex-a-c" v-if="group_code.explain">
          <div class="opt explain-item flex-a-c flex-j-c "  @click="explainFlag = true">
            <span class="iconfont icon-qhm_shuoming"></span>
          </div>
          <h3>说明</h3>
        </div>
      </div>
      <van-overlay :show="shareFlag" @click="shareFlag = false" z-index="3">
        <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
          <transition name="van-slide-up">
              <div class="shareWrapper" v-show="shareFlag" @click.stop>
                <div class="imgContent" v-if="qrCodeCanvasSrc">
                    <img :src="qrCodeCanvasSrc" alt="">
                </div>
                  <div v-else class="divContent">
                      <div class="header">
                         <div class="userInfo">
                           <div class="image">
                             <img class="img" v-if="groupCodeInfo.member_id" :src="groupCodeInfo.has_one_member.avatar_image" alt="图片无效" />
                             <img class="img" v-else :src="shop_log" alt="图片无效" />
                           </div>
                            <div class="title">{{group_code.code_name}}</div>
                         </div>
                         <div class="desc">
                          {{group_code.code_guide}}
                         </div>
                      </div>
                      <div class="footer">
                          <share-canvas class="canvas" ref="share_canvas"></share-canvas>
                      </div>
                  </div>

                  <div class="close">
                    <i class="iconfont icon-adsystem_icon_cancle" @click="shareFlag = false"></i>
                  </div>
              </div>
          </transition>
        </div>
      </van-overlay>

      <van-overlay :show="kfFlag" @click="kfFlag = false" z-index="3">
        <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
          <transition name="van-slide-up">
              <div class="explainWrapper" v-show="kfFlag" @click.stop>
                  <div class="header">
                    <div class="title">客服</div>
                    <!-- <i class="iconfont icon-guanbi" @click="kfFlag = false"></i> -->
                  </div>
                  <div class="img">
                    <img :src="group_code.customer_service_img" alt="">
                  </div>
                  <div class="kf_guide">
                    {{group_code.customer_service_guide}}
                  </div>
                  <div class="poster-down"  v-show="kfFlag" @click="kfFlag = false">
                    <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/poster-down.png" />
                  </div>
              </div>
              
          </transition>
        </div>
      </van-overlay>

      <van-overlay :show="explainFlag" @click="explainFlag = false" :lock-scroll="false" z-index="3">
        <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
          <transition name="van-slide-up">
              <div class="explainWrapper" v-show="explainFlag" @click.stop>
                  <div class="header">
                    <div class="title explain-title">说明</div>
                  </div>
                  <div id="a_content" class="content " v-html="group_code.explain_content"></div>
                  <div class="poster-down"  v-show="explainFlag" @click="explainFlag = false">
                    <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/poster-down.png" />
                  </div>
              </div>
          </transition>
        </div>
      </van-overlay>

      <!-- 权限不足弹框 -->
      <van-popup
        v-model="showAuthDialog"
        round
        :style="{ backgroundColor: 'transparent' }" 
        @click-overlay="onCloseAuthDialog"
      >
        <div class="auth-dialog">
          <p class="auth-tip">您不满足进群条件，加入当前的群需要满足以下条件：</p>
          <ol v-if="openAuthData">
            <li v-if="openAuthData.pay.is_open">
              累计消费金额满{{openAuthData.pay.data}}元！
              <span class="link-text" @click="toPage('home')">去消费</span>
            </li>
            <li v-if="openAuthData.member_level.is_open">
              升级到
              <span>{{levelNames}}</span>
              <span class="link-text" @click="toPage('MemberGradeList')">查看会员级别</span>
            </li>
            <li v-if="openAuthData.member_tags.is_open">
              获得以下标签身份：
              <div>
                <van-tag plain type="primary"
                  v-for="(item, index) in openAuthData.member_tags.data" :key="index">{{item.title}}</van-tag>
              </div>
            </li>
            <li v-if="openAuthData.goods.is_open">
                    购买指定商品
                    <span class="link-text" @click="toPage('groupCodeGoodsList', {id: $route.query.groupCodeId})">查看商品</span>
                </li>
          </ol>
        </div>
        <div class="poster-down-auth"   @click="onCloseAuthDialog">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/poster-down.png" />
        </div>
      </van-popup>
    </div>
</template>

<script>
import groupCodeShowController from './group_code_show_controller.js';

export default groupCodeShowController;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
   /* 隐藏标准的滚动条 */
    html::-webkit-scrollbar {
      width: 0;
    }
    body::-webkit-scrollbar {
      width: 0;
    }
    /* 隐藏 IE 和 Edge 浏览器的滚动条 */
    ::-ms-scrollbar {
      width: 0;
    }
    .explainWrapper .content::-webkit-scrollbar {
      width: 0;
    } 
  .page { background: #F5F5F5; min-height: 100vh; padding-bottom: 3.0625rem; }

  .qrCodeTips {
    text-align: left;
    margin-top: 0.656rem;
    font-size: 0.75rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.5rem;
    letter-spacing: 0;
    color: #666;
    margin-left: 0.781rem;
    padding-bottom: 3rem;
  }

  .explainWrapper {
    width: 15.625rem;
    max-height: 24rem;
    background-color: #fff;
    border-radius: 0.9375rem;
    transition: 0.3s;
    padding:1.125rem 0 1.875rem 0;
    position: relative;

    .header {
      // height: 2.596rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .img {
        width: 2.25rem;
        height: 2.25rem;
        margin-right: 0.625rem;

        img,
        canvas {
          width: 2.25rem;
          height: 2.25rem;
          border-radius: 50%;
        }
      }

      .title {
        font-size: 1.125rem;
        line-height: 1.125rem;
        font-weight: bold;
        color: #000000;
        letter-spacing: 0.05rem;
      }
      .explain-title {
        padding:0 0 0.9375rem 0;
      }

      .icon-guanbi {
        position: absolute;
        top: 0.875rem;
        right: 1.25rem;
        color: #000;
      }
    }
    

    .content {
      max-height: 20rem;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      letter-spacing: 0.066rem;
      color: #666;
      text-align: left;
      text-indent: 1.75rem;
      line-height: 1.5rem;
      color: #000000;
    }
    
    .img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      // height: 14rem;
      padding:0.9375rem 0 0 0;

      img {
        width: 10.625rem;
        height: 10.625rem;
      }
    }

    .kf_guide {
      max-height: 3rem;
      padding-top: 0.506rem;
      padding-left: 2.688rem;
      padding-right: 2.688rem;
      font-size: 0.875rem;
      letter-spacing: 0;
      color: #666;
      // overflow-y: scroll;
    }
  }


  .shareWrapper {
    height: 29rem;
    width: 18rem;

    .imgContent {
      width: 18rem;
      height: 25rem;

      img {
        width: 18rem;
        height: 25rem;
      }
    }

    .divContent {
      width: 18rem;
      height: 25rem;
      padding: 3rem 1rem;
      background-image: url(../../../assets/images/member/qhm_sharepicbg@2x.png);
      background-size: cover;

      .header {
        height: 8rem;
        width: 16rem;

        .userInfo {
          display: flex;
          align-items: center;
          padding: 1rem 0 0 1rem;

          .image {
            .img {
              width: 2rem;
              height: 2rem;
              border-radius: 50%;
            }
          }

          .title {
            margin-left: 1rem;
            font-size: 1rem;
            color: #333;
          }
        }

        .desc {
          height: 4rem;
          text-align: left;
          padding: 0.3rem 1rem 2rem 1rem;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 3;
          // line-clamp: 3;
          // -webkit-box-orient: vertical;
        }
      }

      .footer {
        width: 7rem;
        height: 7rem;
        margin-top: 2rem;
        margin-left: 1rem;
        background-color: red;

        .canvas {
          width: 7rem;
          height: 7rem;
        }
      }
    }

    .close {
      height: 4rem;
      display: flex;
      align-items: flex-end;
      justify-content: center;

      .icon-adsystem_icon_cancle {
        font-size: 3rem;
        color: #fff;
        width: 3rem;
        height: 3rem;
      }
    }
  }

  .auth-dialog {
    width: 15.625rem;
    background-color: #fff;
    padding: 1.25rem;
    box-sizing: border-box;
    font-size: 0.875rem;
    color: #102636;
    text-align: left;
    position: relative;
    border-radius:0.9375rem;
    .auth-tip {
      font-weight: bold;
      margin-bottom: 1.2rem;
    }

    ol {
      list-style: auto;
      padding-left: 1.2rem;
    }

    li {
      list-style: auto;
      margin-bottom: 1.2rem;
    }

    .link-text {
      color: #6fbcaf;
    }

    .van-tag {
      margin: 0.8rem 0.8rem 0 0;
    }
  }
  .poster-down {
    position: absolute;
    z-index: 99;
    bottom:-3.5rem;
    left:50%;
    transform: translateX(-50%);
    img {
      width: 2rem;
      height: 2rem;
      cursor: pointer;
    }
  }
  .poster-down-auth {
    padding:1.5625rem 0 0 0;
    img {
      width: 2rem;
      height: 2rem;
      cursor: pointer;
    }
  }
  //新的样式
  .group-code {
    background: #FFFFFF;
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    margin:2.75rem 0.75rem 0 0.75rem;
    .group-header {
      position: relative;
      &::after {
        content:'';
        width: 1.5625rem;
        height: 1.5625rem;
        border-radius: 50%;
        background: #F5F5F5;
        position: absolute;
        bottom:0;
        left:2px;
        z-index: 2;
        transform: translate(-50%,50%);
      }
      &::before {
        content:'';
        width: 1.5625rem;
        height: 1.5625rem;
        border-radius: 50%;
        background: #F5F5F5;
        position: absolute;
        bottom:0;
        right:2px;
        z-index: 2;
        transform: translate(50%,50%);
      }
      .image {
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        top:-2.125rem;
        img {
          width: 4.25rem;
          height: 4.25rem;
          border-radius: 50%;
          border:0.125rem solid #D6D6DC;
        }
      }
      .group-title {
        padding:2.9375rem 0 0 0;
        margin: 0 1.375rem;
        border-bottom: 0.0625rem dashed #D6D6DC;
        .title {
          font-weight: bold;
          color: #000000;
          font-size: 1.125rem
        }
        .desc {
          font-size: 0.875rem;
          font-weight: 400;
          color: #6E6E79;
          padding: 0 0 1.5625rem 0;
        }
      }
    }
    .group-content {
      flex-direction: column;
      .img {
        width:14.125rem;
        height: 14.125rem;
        padding:1.875rem 0 0 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .explain {
        padding: 0 0 2rem 0;
        p {
          padding:1rem 0 0.5rem 0;
          font-size: 0.9375rem;
          font-weight: 500;
          color: #00001C;
        }
        span {
          font-size: 0.75rem;
          font-weight: 400;
          color: #6E6E79;
          display:inline-block;
        }
      }
    }
  }
  .opts-box {
    margin:0.625rem 0.625rem  0 0.625rem;
    padding:1.375rem 0rem;
    background: #FFFFFF;
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    .opts-item {
      flex-direction: column;
      flex:0 0 33.3%;
      h3 {
        font-size: 0.875rem;
        font-weight: 400;
        color: #00001C;
        padding:0.625rem 0 0 0;
      }
      .opt {
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
        
      }
      .share {
        background-color: #E8F4FC;
        span {
          color:#2AA3FF;
          font-size: 1.5625rem;
        }
      }
      .service {
        background-color: #E2FBF0;
        span {
          color:#32C476;
          font-size: 1.5625rem;
        }
      }
      .explain-item {
        background-color: #E9EFFC;
        span {
          color:#5F64F6;
          font-size: 1.5625rem;
        }
      }
    }
  }
</style>
